<template>
  <BaseSearch
    layout="vertical"
    :grid="4"
    :footerItem="true"
    :configJsonArr="configJsonArr"
    :baseData="customBaseData"
    @confirm="confirm">
    <!-- 头像上传 自定义item -->
    <template v-slot:photoUpload>
      <a-form-item name="photoUpload" label="头像上传">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          v-model:fileList="customBaseData['photoUpload']"
          list-type="picture-card"
          :showUploadList="false"
          :before-upload="beforeUpload"
          @change="handleChange">
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
    </template>
  </BaseSearch>
</template>

<script setup>
import { ref, reactive } from 'vue'
import BaseSearch from '@/components/BaseSearch'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const configJsonArr = ref([
  {
    type: 'Upload',
    label: '自动上传',
    name: 'autoUpload',
    rules: [{ required: true, message: '请上传文件' }],
    props: {
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      name: 'autoUpload',
      auto: true,
      multiple: false,
      maxCount: 1,
      accept: '.doc,.docx,.pdf,.jpg,.jpeg,.png',
      placeholder: 'Click to Upload',
    }
  },
  {
    type: 'Upload',
    label: '单文件上传',
    name: 'onlyUpload',
    rules: [{ required: true, message: '请上传文件' }],
    props: {
      auto: false,
      multiple: false,
      maxCount: 1,
      accept: '.doc,.docx,.pdf,.jpg,.jpeg,.png',
      placeholder: 'Click to Upload',
      showUploadList: true
    }
  },
  {
    type: 'Upload',
    label: '多文件上传',
    name: 'multipleUpload',
    props: {
      auto: false,
      multiple: true,
      maxCount: 3,
      accept: '.doc,.docx,.pdf,.jpg,.jpeg,.png',
      listType: 'picture',
      placeholder: 'Click to Upload',
    }
  },
  {
    type: 'Upload',
    label: '头像上传',
    name: 'photoUpload',
    props: {
      auto: true,
      multiple: false,
      maxCount: 1,
    }
  },
  {
    type: 'Upload',
    label: '照片墙 自定义preview方法',
    name: 'photoListUpload',
    grow: 2,
    props: {
      // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      auto: false,
      multiple: false,
      maxCount: 3,
      accept: '.jpg,.jpeg,.png',
      placeholder: 'Upload',
      listType: 'picture-card',
    },
    events: {
      preview: (file) => {
        console.log(file)
      }
    }
  },
  {
    type: 'Upload',
    label: '照片墙 默认预览',
    name: 'photoListPreviewUpload',
    grow: 2,
    props: {
      // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      auto: false,
      multiple: false,
      maxCount: 3,
      accept: '.jpg,.jpeg,.png',
      placeholder: 'Upload',
      listType: 'picture-card',
      isPreview: true
    }
  },
  {
    type: 'Upload',
    label: '推拽上传',
    name: 'draggerUpload',
    grow: 2,
    props: {
      type: 'a-upload-dragger',
      auto: false,
      multiple: false,
      maxCount: 3,
      accept: '.jpg,.jpeg,.png',
      placeholder: 'Upload',
      hint: 'You can upload any files with these type: jpg, png'
    }
  },
])

const customBaseData = reactive({})
const imageUrl = ref('')
const loading = ref(false)

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

const handleChange = (info) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, (base64Url) => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
}

/** 提交 start  */
const confirm = (values) => {
  console.log(values)
}
</script>

<style scoped lang="less">
</style>
